<template>
    <div class="groupBox">
        <div class="group_header">
            <img src="http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/jxd/%E7%A7%92%E6%9D%80%E5%9B%BE.png" class="group_header_img" />
            <span class="group_header_title">{{content.title}}</span>
            <div class="group_header_dateConetnt">
                <div class="group_header_content_titleBox">
                    <span class="group_header_content_title">距结束：</span>
                </div>
                <div class="group_header_date">
                    <span class="group_header_date_title">{{date}}</span>
                </div>
                <span class="group_header_date_icon">:</span>
                <div class="group_header_date">
                    <span class="group_header_date_title">{{hou}}</span>
                </div>
                <span class="group_header_date_icon">:</span>
                <div class="group_header_date">
                    <span class="group_header_date_title">{{min}}</span>
                </div>
                <span class="group_header_date_icon">:</span>
                <div class="group_header_date">
                    <span class="group_header_date_title">{{sec}}</span>
                </div>
            </div>
        </div>
        <div class="group_content">
            <div class="group_item" v-for="item in groupForm.itemList">
                <img :src="item.thumbnail" class="group_item_img" />
                <div class="spike_price_box">
                    <span class="spike_price_title">秒杀价：¥</span>
                    <span class="spike_price">{{item.price}}</span>
                </div>
                <div class="market_price_box">
                    <span class="market_price_title">市场价：¥</span>
                    <span class="market_price">{{item.marketPrice}}</span>
                </div>
            </div>
            <noData v-if="!groupForm.itemList || groupForm.itemList.length===0"></noData>
        </div>
    </div>
</template>
<script>
import { groupList } from "@/api/groupBuy";
import {mapGetters} from 'vuex';
import utils from '../../../../utils/utils.js'
import noData from '../product/components/noData'
export default {
    data() {
        return {
            groupForm: {},
            date: "",
            hou: "",
            min: "",
            sec: "",
            ssec: "",
            interval: null,
        };
    },
    computed: {
      ...mapGetters([
        'mchId'
      ])
    },
    components:{
        noData
    },
    props:[
      'content'
    ],
    created() {
        this.loadList();
    },
    beforeDestroy() {
        if (this.interval) {
            //如果定时器还在运行 或者直接关闭，不用判断
            clearInterval(this.interval); //关闭
        }
    },
    methods: {
        loadList() {
            var _this = this;
            groupList({ type: 4 ,mchId:this.mchId}).then((res) => {
                console.log(res);
                if(res.data.data.length > 0){
                    _this.groupForm = res.data.data[0];
                    if(_this.groupForm.itemList.length > 0){
                        _this.groupForm.itemList.forEach(function(item){
                            item.thumbnail = utils.thumbnail(item.thumbnail,520,520)
                        })
                    }
                }
                _this.time();
            });
        },
        time() {
            var that = this;
            this.interval = setInterval(function timestampToTime() {
                var date = new Date(that.groupForm.endDate) - new Date();
                //new Date当前的时间戳，也可以换成自定义的时间戳
                if (date > 0) {
                    let time = date / 1000;
                    // 获取时、分、秒,毫秒
                    that.date =
                        Math.floor(date / (24 * 3600 * 1000)) < 10
                            ? "0" + Math.floor(date / (24 * 3600 * 1000))
                            : Math.floor(date / (24 * 3600 * 1000));
                    that.hou =
                        parseInt((time % (60 * 60 * 24)) / 3600) < 10
                            ? "0" + parseInt((time % (60 * 60 * 24)) / 3600)
                            : parseInt((time % (60 * 60 * 24)) / 3600);
                    that.min =
                        parseInt(((time % (60 * 60 * 24)) % 3600) / 60) < 10
                            ? "0" +
                              parseInt(((time % (60 * 60 * 24)) % 3600) / 60)
                            : parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
                    that.sec =
                        parseInt(((time % (60 * 60 * 24)) % 3600) % 60) < 10
                            ? "0" +
                              parseInt(((time % (60 * 60 * 24)) % 3600) % 60)
                            : parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
                } else {
                    //活动已结束，全部设置为'00'
                        (that.date = "00"),
                        (that.hou = "00"),
                        (that.min = "00"),
                        (that.sec = "00");
                }
            }, 100);
        },
    },
};
</script>
<style scoped>
.groupBox {
    width: 355px;
    margin-left: 10px;
    background-color: white;
    border-radius: 8px;
    margin-top: 10px;
    overflow: hidden;
}
.group_header {
    width: 355px;
    height: 52px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.group_header_img {
    width: 375px;
    height: 62px;
    position: absolute;
    top: -6px;
    left: -5px;
}

.group_header_title {
    font-size: 14px;
    position: absolute;
    left: 50px;
    font-weight: 700;
    color: white;
    width: 62px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.group_header_dateConetnt {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    right: 10px;
}

.group_header_date {
    width: 25px;
    height: 25px;
    background-color: white;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.group_header_date_icon {
    font-size: 30px;
    color: white;
    margin-left: 2px;
    margin-right: 2px;
}

.group_header_content_titleBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.group_header_content_title {
    font-size: 14px;
    color: white;
    text-align: center;
}

.group_header_date_title {
    font-size: 14px;
    color: coral;
    font-weight: 700;
}

.group_content {
    width: 355px;
    display: -webkit-box;
    display: -moz-box;
    overflow: auto;
    margin-top: 10px;
    margin-bottom: 10px;
}
.group_item {
    width: 130px;
    /* background-color: coral; */
    margin-right: 5px;
    margin-left: 5px;
}
.group_item:last-child {
    margin-right: 10px;
}
.group_item:first-child {
    margin-left: 10px;
}
.group_item_img {
    width: 130px;
    height: 130px;
    border-radius: 10px;
}
.spike_price_box {
    display: flex;
    margin-top: 5px;
}
.spike_price_title {
    font-size: 14px;
    color: coral;
    line-height: 20px;
}
.spike_price {
    font-size: 18px;
    font-weight: 700;
    color: tomato;
    line-height: 18px;
}
.market_price_box {
    display: flex;
    margin-top: 5px;
}
.market_price_title {
    font-size: 14px;
    color: #333;
    line-height: 16px;
}
.market_price {
    font-size: 14px;
    color: #888888;
    text-decoration: line-through;
}
</style>
